<template>
  <div style="margin-left: 100px">
    <!--  规格类型-->
    <el-form>
      <el-form-item label="规格类型">
        <el-radio-group v-model="state.Spec">
          <el-radio :label="1">单规格</el-radio>
          <el-radio :label="2">多规格</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <!--  单规格-->
    <el-form
        :model="ASingleSpecification"
        label-width="auto"
        label-position="right"
        v-show="state.Spec===1"
        :rules="Alonerules"
        ref="aloneRef"
    >
      <el-form-item label="商品价格:" prop="goods_price">
        <el-input type="number" v-model="ASingleSpecification.goods_price" class="numberInput"></el-input>
        <span class="Unit">元</span>
      </el-form-item>
      <el-form-item label="划线价:" prop="goods_line">
        <el-input v-model="ASingleSpecification.goods_line" type="number" class="numberInput"></el-input>
        <span class="Unit">元</span>
      </el-form-item>
      <el-form-item label="当前库存数量:" prop="goods_store">
        <el-input v-model="ASingleSpecification.goods_store" type="number" class="numberInput"></el-input>
        <span class="Unit">件</span>
      </el-form-item>
      <el-form-item label="商品重量:" prop="goods_kg">
        <el-input v-model="ASingleSpecification.goods_kg" type="number" class="numberInput"></el-input>
        <span class="Unit">千克(kg)</span>
      </el-form-item>
      <el-form-item label="库存计算方式:">
        <el-radio-group v-model="ASingleSpecification.goods_way">
          <el-radio :label="1">下单减库存</el-radio>
          <el-radio :label="2">付款减库存</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <!--    多规格-->
    <el-form v-show="state.Spec===2" :model="ASingleSpecification">
      <el-form-item label="商品规格:">
        <div>
          <div>最多添加3个商品规格组，生成的SKU数量不能超出50个</div>
          <!--          商品规格列表-->
          <div v-for="(item,index) in  goods_specifications" :key="index">
            <div style="background-color: #f4f5f9;padding: 10px;display: flex;justify-content: space-between">
              <el-input placeholder="请输入规格名称" style="width: 170px" v-model="item.key"></el-input>
              <el-link :underline="false" type="primary" @click="removeGroup(index)">删除规格组</el-link>
            </div>
            <div style="display: flex;flex-wrap: wrap;width: 800px;padding: 20px">
              <el-input placeholder="请输入规格值" class="sizeValue" v-for="(itemm,indexx) in item.value"
                        v-model="item.value[indexx]"></el-input>

              <div style="margin-left: 10px">
                <el-link :underline="false" type="primary" @click="addSizeValue(index)">新增规格值</el-link>
              </div>
            </div>
          </div>
          <div v-if="goods_specifications.length!==3" style="margin-top: 20px">
            <el-button icon="Plus" @click="addGroup">添加规格组</el-button>
          </div>
        </div>
      </el-form-item>
      <!--      sku表格-->
      <el-table style="width: 1000px" :data="sku_list" border v-show="goods_specifications.length>0">
        <el-table-column :label="item.key" v-for="(item,index) in goods_specifications">
          <template #default="scope">
            {{ scope.row.sku[index] }}
          </template>
        </el-table-column>
        <el-table-column label="预览图" width="100px">
          <template #default="scope">
            <el-upload
                name="img"
                class="avatar-uploader"
                action="http://api_devs.wanxikeji.cn/api/savePic"
                :show-file-list="false"
                :on-success="(res)=>{handleAvatarSuccess(res,scope)}"
            >

              <div v-if="scope.row.img" class="Imghover">
                <el-icon class="moveImg"  color="black" @click.stop="moveImg(scope)">
                  <Close/>
                </el-icon>
                <img :src="scope.row.img" class="avatar" style="height: 74px"/>
              </div>
              <el-icon v-else class="avatar-uploader-icon">
                <Plus/>
              </el-icon>
            </el-upload>
          </template>
        </el-table-column>
        <el-table-column label="商品价格">
          <template #default="scope">
            <el-input v-model="scope.row.price"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="划线价格">
          <template #default="scope">
            <el-input v-model="scope.row.goods_line"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="库存数量">
          <template #default="scope">
            <el-input v-model="scope.row.stock"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="商品重量(KG)">
          <template #default="scope">
            <el-input v-model="scope.row.goods_kg"></el-input>
          </template>
        </el-table-column>
        <el-table-column label="SKU编码">
          <template #default="scope">
            <el-input v-model="scope.row.goods_number"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <el-form-item>
      </el-form-item>
    </el-form>
    <el-button type="primary" style="margin-left: 110px" @click="aloneSubmit(aloneRef)">提交</el-button>
  </div>
</template>
<script setup>
import {reactive, ref, watch, defineEmits, computed} from "vue";
import {goods_sku} from "@/util/goods_sku";
import {useStore} from "vuex";
const store=useStore()
//规格
const state = reactive({
  Spec: 1
})
//    单规格
const aloneRef = ref()
const ASingleSpecification = reactive({
  goods_price: '',
  goods_line: '',
  goods_store: '',
  goods_kg: '',
  goods_way: 1
})
//单规格校验规则
const Alonerules = reactive({
  goods_price: [{required: true, message: '请输入商品价格', trigger: 'change'}],
  goods_line: [{required: true, message: '请输入商品价格', trigger: 'change'}],
  goods_store: [{required: true, message: '请输入商品库存', trigger: 'change'}],
  goods_kg: [{required: true, message: '请输入商品重量', trigger: 'change'}],
})
const emit=defineEmits(['SizeSubmit'])
//单规格提交
const aloneSubmit = () => {
  let sku_column=goods_specifications
    store.commit("goods/get_goodsSize",ASingleSpecification)
    store.commit("goods/get_edition",{sku_column,sku_list})
    emit('SizeSubmit',)
}
//多规格商品规格
let goods_specifications = reactive([])
//添加规格组
const addGroup = () => {
  goods_specifications.push({
    key: '',
    value: [""]
  })
}
//删除规格组
const removeGroup = (index) => {
  goods_specifications.splice(index, 1)
}
//新增规格值
const addSizeValue = (index) => {
  goods_specifications[index].value.push("")
}
//要遍历的数据
let sku_list = ref([])
watch(goods_specifications, (newValue) => {
  sku_list.value = []
  let temArr = goods_sku(newValue)
  temArr.forEach(item => {
    sku_list.value.push({
      sku: Array.isArray(item)?[].concat(...item):[item],
      img: '',
      price: '',
      goods_line: '',
      stock: '',
      goods_kg: '',
      goods_number: ''
    })
  })
})
//上传
const handleAvatarSuccess = (response, pic) => {
  if (response.code === 2000) {
    pic.row.img = "http://api_devs.wanxikeji.cn/" + response.data
  }
}

const moveImg=(scope)=>{
  // alert("123")
  scope.row.img=""
}
//给父亲校验
defineExpose({
  aloneRef
})
let temObj=computed(()=>{
  return store.state.edits.goods_size
})
watch(temObj,(val)=>{
  ASingleSpecification.goods_price=val.price
  // goods_specifications=val.edition.sku_column
 if(val.edition && JSON.parse(val.edition).sku_column) {
   JSON.parse(val.edition).sku_column.forEach(item=>{
     goods_specifications.push(item)
   })
   setTimeout(()=>{
     console.log(JSON.parse(val.edition).sku_list)
     console.log(sku_list.value)
     JSON.parse(val.edition).sku_list.forEach((item,index)=>{
       sku_list.value[index].img=item.img
       sku_list.value[index].price=item.price
       sku_list.value[index].stock=item.stock
     })
   })
 }
})
</script>

<style scoped>
.numberInput {
  width: 160px;
}
.el-form-item {
  margin-bottom: 40px;
}

.Unit {
  margin-left: 10px;
}
.sizeValue {
  width: 180px;
  margin-left: 10px;
  margin-bottom: 10px;
}
.cell {
  display: flex;
  align-items: center;
  justify-content: center;
}
/*上传*/
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}

.avatar-uploader {
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-icon.avatar-uploader-icon[data-v-9e9f1aa6] {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 84px;
  text-align: center;
}

.moveImg {
  position: absolute;
  top: 3%;
  left: 81%;
  font-size: 20px;
  display: none;
}

.Imghover:hover .moveImg{
  display: block;
}
</style>
